<!DOCTYPE html>
<html>

<head>
    <title> Document </title>
</head>

<body>
    <div class="mix"></div>
</body>
<style>
    

    .mix {
        /*设置元素宽度*/
        width: 200px;
        /*设置元素高度*/
        height: 200px;
        position: relative;
        /*设置背景图像*/
        background: url(https://picsum.photos/200/300) #0ff ;
        background-blend-mode: lighten;
    }
    .mix::before{
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        /*设置背景图像*/
        background: url(https://picsum.photos/200/300) #f40 ;
        background-blend-mode: lighten;
        margin-left: 15px;
        mix-blend-mode: darken;
        animation: shaken 30ms infinite;
    }
    @keyframes shaken {
        50%{
            transform: translateX(10px);
        }
    }

    
</style>

</html>